@img: "/static/img/park/index";
//首页宽高和背景
.park {
  .WH(100vw, 100vh);
  overflow: hidden;
  background: url("@{img}/bg.webp") center no-repeat;
  background-size: 100% 100%;
}
//首页头部样式
.park-header {
  height: 8%;
  width: 100%;
  display: flex;
  //左侧天气
  .header-weater {
    .WH(10%, 100%);
    display: flex;
    align-items: center;
    .weater-data {
      .WH(30%, 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon_weater {
        display: block;
        .WH(3vmin, 3vmin);
        .backgroundImg("@{img}/header/cloud.webp");
      }
      .text_weater {
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
      }
    }
    .temperature_weater {
      font-size: 12px;
      font-weight: 400;
      color: #b0e0ff;
      line-height: 20px;
    }
  }
  //中间标题
  .header-title {
    .WH(80%, 100%);
    background: url("@{img}/header/homeTitle.webp") 50% -5% no-repeat;
    background-size: 100%;
    .displayFlex;
    .title_text {
      font-size: 36px;
      font-weight: 500;
      color: #ffffff;
      line-height: 42px;
      text-shadow: 0px 0px 10px #3fb3ff;
    }
  }
  //右侧时间
  .header-time {
    .WH(10%, 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .new_time {
      font-size: 26px;
      font-weight: 400;
      color: #ffffff;
      line-height: 30px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 2px #27a6ff;
    }
    .time-day {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 2px #27a6ff;
    }
  }
}

//首页内容
.park-content {
  height: 92%;
  width: 100%;
  position: relative;
  .content-border {
    width: calc(100% - 2vw);
    height: calc(100% - 2vh);
    margin: 1vh 1vw;
    position: absolute;
  }
}

// 路由按钮
.router_box {
  .WH(49%, 17%);
  position: fixed;
  left: 25%;
  bottom: 5%;
  display: flex;
  z-index: 2023;
  .previous_page {
    .WH(5%, 100%);
    background: url("@{img}/router/page-off.webp") center/100% no-repeat;
    cursor: pointer;
  }
  .router_wrap {
    .WH(90%, 100%);
    overflow: hidden;
    .router_list {
      .WH(100%, 100%);
      display: flex;
      position: relative;
      left: 0%;
      .router_tab {
        .WH(16.7%, 100%);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .icon_tab {
          display: block;
          .WH(75%, 90%);
          cursor: pointer;
        }
        .text_tab {
          height: 20%;
          font-size: 20px;
          font-weight: 600;
          line-height: 35px;
          background: linear-gradient(180deg, #ffffff 0%, #ffb99c 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
  .last_page {
    .WH(5%, 100%);
    // transform: rotate(180deg);
    background: url("@{img}/router/page-on.webp") center/100% no-repeat;
    cursor: pointer;
  }
}

//路由按钮图片
.router_list .router_tab:first-child i {
  .backgroundImg("@{img}/router/parkHome-off.webp");
}
.router_list .router_tab:nth-child(2) i {
  .backgroundImg("@{img}/router/security-off.webp");
}
.router_list .router_tab:nth-child(3) i {
  .backgroundImg("@{img}/router/general-off.webp");
}
.router_list .router_tab:nth-child(4) i {
  .backgroundImg("@{img}/router/energy-off.webp");
}
.router_list .router_tab:nth-child(5) i {
  .backgroundImg("@{img}/router/item-off.webp");
}
.router_list .router_tab:nth-child(6) i {
  .backgroundImg("@{img}/router/property-off.webp");
}

//路由激活样式
.router_list .router_tab:first-child.router_tab_active i {
  .backgroundImg("@{img}/router/parkHome-on.webp");
}
.router_list .router_tab_active.router_tab:nth-child(2) i {
  .backgroundImg("@{img}/router/security-on.webp");
}
.router_list .router_tab_active.router_tab:nth-child(3) i {
  .backgroundImg("@{img}/router/general-on.webp");
}
.router_list .router_tab_active.router_tab:nth-child(4) i {
  .backgroundImg("@{img}/router/energy-on.webp");
}
.router_list .router_tab_active.router_tab:nth-child(5) i {
  .backgroundImg("@{img}/router/item-on.webp");
}
.router_list .router_tab_active.router_tab:nth-child(6) i {
  .backgroundImg("@{img}/router/property-on.webp");
}

